<template>
  <div>
    <banner :img-data="imgData">
      <template #banner="{ n }">
        <div class="banner-circle">
          <ul>
            <li :class="{ selected: n === i }" v-for="(v, i) in imgData" :key="i"></li>
          </ul>
        </div>
      </template>
    </banner>

    <banner :img-data="imgData2">
      <template #banner="{ n }">
        <div class="banner-number">
          <ul>
            <li :class="{ checked: n === i }" v-for="(v, i) in imgData2" :key="i">{{ i + 1 }}</li>
          </ul>
        </div>
      </template>
    </banner>
  </div>
</template>

<script setup>
import { ref } from "vue";
import banner from "./banner.vue";

const imgData2 = ref(["1.jpg", "2.jpg", "3.jpg", "1.jpg", "2.jpg"]);

const imgData = ref(["11.jpg", "12.jpg"]);
</script>

<style scoped></style>
